<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用三种方法插入图像</title>
<style type="text/css">
canvas{
	border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
	var canvas=document.getElementById("canvas");
	var context = canvas.getContext("2d");
	// 创建渐变对象：线性渐变
	var grd=context.createRadialGradient(50,50,0,100,100,90);
	// 设置渐变颜色及方式
	grd.addColorStop(0,"#0f0");
	grd.addColorStop(0.5,"#0ff");
	grd.addColorStop(1,"#f90");
	// 将填充样式设置为渐变对象
	context.fillStyle=grd;
	context.beginPath();
	context.arc(100,100,90,0,Math.PI*2,true);	
	context.fill();
}
window.addEventListener("load",Draw,true);
</script>
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能！</canvas>
</body>
</html>
